<template>
  <div>
    <div style="position:absolute;top:2%;left:4%;width: 7%">
      <el-image :src="global.recommendImg+'/static/img/icon.jpg'" />
    </div>
    <div style="position:absolute;left:12%;top:3.8%;width: 60%;font-style:oblique;color: rgba(11,174,245,0.99)">
      <h1>欢迎来到贴乎PLAYER</h1>
    </div>
    <div style="position:absolute;top: 8%;width: 100%">
      <el-divider />
    </div>
    <div style="position:absolute;right: 10%;top: 4.5%;font-style:oblique;">
      <h2><a href="https://beian.miit.gov.cn/#/Integrated/recordQuery">湘ICP备2022001738号-1</a></h2>
    </div>
    <div class="registerDiv">
      <div style="margin: 3%">
        <h2>用户注册页面</h2>
        <el-form :model="registerFrom" status-icon :rules="rules" ref="registerFrom" label-width="120px" class="demo-ruleForm">
          <el-form-item label="请输入名字:" prop="usersName" style="margin-top: 30px">
            <el-input type="text" v-model="registerFrom.usersName" />
          </el-form-item>
          <el-form-item label="请输入密码:" prop="usersPassword">
            <el-input type="password" v-model="registerFrom.usersPassword" />
          </el-form-item>
          <el-form-item label="请再次确认密码:" prop="affirmUsersPassword">
            <el-input type="password" v-model="registerFrom.affirmUsersPassword"/>
          </el-form-item>
          <el-form-item label="请选择头像:">
            <el-upload :action="global.uploadUrl" :on-success="getFirstImage" :before-upload="beforeUpload">
              <el-button type="primary">点击上传头像</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="goRegister()">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../../../utils/request";
export default {
  name: "register",
  data(){
    let validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入名字'));
      }else {
        callback();
      }
    };
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      }else {
        callback();
      }
    };
    let validateAffirmPassword = (rule, value, callback) => {
      if (value === ''){
        callback(new Error('请输入确认密码'));
      }else if (value !== this.registerFrom.usersPassword) {
        callback(new Error('请与上方密码确保一致'));
      }else {
        callback();
      }
    };
    return{
      active:0,
      allImage:[],
      submitState:false,
      registerFrom:{
        usersName:'',
        usersPassword:'',
        usersIP:"",
        usersLocation:"",
        affirmUsersPassword:"",
      },
      rules: {
        affirmUsersPassword:[
          { validator: validateAffirmPassword, trigger: 'blur' }
        ],
        usersName: [
          { validator: validateName, trigger: 'blur' }
        ],
        usersPassword: [
          { validator: validatePass, trigger: 'blur' }
        ],
      }
    }
  },
  methods:{
    beforeUpload(file) {
      let testMsg=file.name.substring(file.name.lastIndexOf('.')+1)
      const extension = testMsg === 'jpg'
      const extension2 = testMsg === 'png'
      const isLt2M = file.size / 1024 / 1024 < 2     //这里做文件大小限制
      if(!extension && !extension2) {
        this.$message({
          message: '上传文件只能是 jpg、png格式!',
          type: 'warning'
        });
      }
      if(!isLt2M) {
        this.$message({
          message: '上传文件大小不能超过 2MB!',
          type: 'warning'
        });
      }
      return extension || extension2 && isLt2M
    },
    goRegister(){
      this.$refs['registerFrom'].validate((valid) => {
        if (valid) {
          let Ip=returnCitySN['cip']
          let cityname=returnCitySN['cname']
          this.registerFrom.usersIP=Ip;
          this.registerFrom.usersLocation=cityname;
          request.post('/users/register', this.registerFrom).then(res =>{
            if (res.code !== "200"){
              this.$message.error(res.msg)
              return
            }
            this.submitState=true
            this.$message.success(res.msg)
            this.$router.push("/login")
          })
        } else {
          return false;
        }
      });
    },
    getFirstImage(res){
      if (this.global.recommendImg === "http://localhost:8080"){
        this.allImage.push(res.msg.substring(33))
      }else if (this.global.recommendImg === "https://www.tiehuplayer.xyz"){
        this.allImage.push(res.msg.substring(39))
      }
      this.registerFrom.usersPortrait=res.msg;
    },
  },
  mounted() {
    document.title="用户注册 - 贴乎";
  },
  destroyed() {
    if (this.allImage.length !== 0 && this.submitState === false){
      request.delete('/file/delete/?allImage='+this.allImage)
    }
  },
}
</script>

<style scoped>
.registerDiv{
  max-width: 600px;
  margin: auto;
  margin-top: 170px;
  border-radius: 5px;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
a{
  color: rgba(11,174,245,0.99);
  text-decoration: none;
}
</style>